<template>
  <div>
    <a-row :gutter="[0, 0]" class="card">
      <a-card>
        <a-col :span="1" style="margin-right: 15px">
          <a-avatar
            :size="60"
            icon="user"
            class="ant-dropdown-link"
            @click="(e) => e.preventDefault()"
            style="background-color: #87d068"
          />
        </a-col>
        <a-col :span="20">
          <p class="p title">中午好 {{ data }}，欢迎回来。</p>
          <p class="p">
            最近待办：1、页面布局切换功能。2、不同样式切换功能。3、tags已打开标签页切换功能。4、扩大权限管理范围，增加部门管理，及菜单中各功能的权限。
          </p>
        </a-col>
      </a-card>
    </a-row>
    <a-row :gutter="[16, 0]" class="card">
      <a-col :span="8">
        <a-card>
          <span slot="title" href="#">
            <a-icon type="area-chart" />
            访问量
          </span>
          <span slot="extra" href="#">
            <a-tag color="cyan">近七天</a-tag>
          </span>
          <div ref="chart1" style="width: 100%; height: 180px"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <span slot="title" href="#">
            <a-icon type="bar-chart" />
            商品价格变化
          </span>
          <span slot="extra" href="#">
            <a-tag color="purple">单位：元</a-tag>
          </span>
          <div ref="chart2" style="width: 100%; height: 180px"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <span slot="title" href="#">
            <a-icon type="pie-chart" />
            访问方式
          </span>
          <span slot="extra" href="#">
            <a-tag color="orange">近一个月</a-tag>
          </span>
          <div ref="chart3" style="width: 100%; height: 180px"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 0]">
      <a-col :span="14">
        <a-card>
          <p class="intro_title">猫饼后台管理框架</p>
          <p>
            基于各开源后台管理系统，完成一个只有部分功能的练习项目，主要实现了用户、角色、菜单三者之间的权限管理，另外完成了一个应用值班管理，主要用来练习nodejs的fs模块使用。
          </p>
          <p>
            作为一个前端开发人员，一直想体验下全栈开发的魅力，本着上手快的原则，本项目后端采用nodejs开发，给自己梳理了一下大致的开发流程。在开始该项目之前在网上找过很多关于nodejs的练习，但都是小demo或者知识点，很难系统找到如何架构整个系统。
          </p>
          <p>
            本项目也是属于摸着石头过河，还存在相当多的问题，只是提供了最简单的架构思路，慢慢学习慢慢完善。整个过程中最难的部分当属于最早开始弄的时候不知道如何下手，流程该是怎么样，相信很多新司机都会有这种迷茫。实际开始做之后，一小部分一小部分的反而不会有什么大问题，基本都能找到解决办法。由此感叹，果然架构这个环节是最重要的，后边的搬砖相对来说只是工作量罢了（当然质量也很重要！）
          </p>
          <p>湖人总冠军！Go Fighting</p>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card>
          <p class="intro_title">技术选型</p>
          <div class="intro_content">
            <div>
              <h3>前端技术</h3>
              <ul>
                <li>Vue</li>
                <li>Vuex</li>
                <li>AntDesignVue</li>
                <li>Axios</li>
                <li>Sass</li>
                <li>Webpack</li>
                <li>Echarts</li>
                <li>...</li>
              </ul>
            </div>
            <div>
              <h3>后端技术</h3>
              <ul>
                <li>Nodejs</li>
                <li>Koa2</li>
                <li>Mongodb</li>
                <li>Mongoose</li>
                <li>JWT</li>
                <li>Bcryptjs</li>
                <li>Xlsx</li>
                <li>Jest</li>
                <li>...</li>
              </ul>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import * as echarts from 'echarts';

let option1 = {
  grid: {
    top: 30,
    bottom: 20,
    left: 20,
    right: 70
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '访问量',
    data: [],
    type: 'line',
    lineStyle: {
      color: '#77E19D'
    },
    itemStyle: {
      color: '#77E19D'
    },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#78E1A0' // 0% 处的颜色
        }, {
          offset: 1, color: '#75C4E7' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }
    },
    markPoint: {
      symbolSize: 40,
      data: [
        {
          name: '最大值',
          type: 'max'
        }
      ]
    }
  }]
}
let option2 = {
  grid: {
    top: 30,
    bottom: 20,
    left: 30,
    right: 70
  },
  legend: {
    data: ['同比', '环比']
  },
  tooltip: {},
  xAxis: {
    data: [],
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  series: [{
    name: '同比',
    type: 'bar',
    data: [],
    emphasis: {
      focus: 'series'
    },
    animationDelay: function (idx) {
      return idx * 10;
    }
  }, {
    name: '环比',
    type: 'bar',
    data: [],
    emphasis: {
      focus: 'series'
    },
    animationDelay: function (idx) {
      return idx * 10 + 100;
    }
  }],
  animationEasing: 'elasticOut',
  animationDelayUpdate: function (idx) {
    return idx * 5;
  }
}
let option3 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 15
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['0', '95%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '32',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 15, name: '搜索引擎' },
        { value: 10, name: '直接访问' },
        { value: 6, name: '邮件营销' },
        { value: 5, name: '联盟广告' },
        { value: 7, name: '视频广告' }
      ]
    }
  ]
}

export default {
  data() {
    return {
      moment,
      data: localStorage.getItem("user"),
      option1,
      option2,
      option3,
    }
  },
  methods: {
    initChart1() {
      let chart1 = echarts.init(this.$refs.chart1);
      let times = [];
      let datas = [];
      let nowDate = +new Date();
      for (let i = 0; i < 7; i++) {
        times.push(moment(nowDate).format('MM/DD'));
        datas.push(Math.floor(Math.random() * 10));
        nowDate = nowDate - (1000 * 60 * 60 * 24);
      }
      this.option1.xAxis.data = times.reverse();
      this.option1.series[0].data = datas;
      chart1.setOption(this.option1);
    },
    initChart2() {
      let chart2 = echarts.init(this.$refs.chart2);
      let xAxisData = [];
      let data1 = [];
      let data2 = [];
      for (let i = 0; i < 50; i++) {
        xAxisData.push('商品' + i);
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6).toFixed(3));
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6).toFixed(3));
      }
      this.option2.xAxis.data = xAxisData;
      this.option2.series[0].data = data1;
      this.option2.series[1].data = data2;
      chart2.setOption(this.option2);
    },
    initChart3() {
      let chart3 = echarts.init(this.$refs.chart3);
      chart3.setOption(this.option3);
    }
  },
  mounted() {
    this.initChart1();
    this.initChart2();
    this.initChart3();
  },
}
</script>

<style lang="scss" scoped>
.p {
  margin-bottom: 0;
  text-align: left;
}
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 7px;
}
.card {
  margin-bottom: 15px;
}
.intro_title {
  font-size: 24px;
}
.intro_content {
  display: flex;
  > div {
    width: 50%;
    > h3 {
      margin-left: 38px;
    }
  }
}
ul {
  list-style: none;
}
</style>